<template>
  <div style="height: 100%">
    <div style="height: 10%">
      <el-button
        style="float: left; font-size: 10px"
        type="primary"
        @click="openServiceInput()"
        >新增服务</el-button
      >
    </div>
    <div style="overflow-y: scroll; overflow-x: hidden; height: 90%">
      <el-row :gutter="10">
        <el-col
          :span="4"
          v-for="(test, index) in listService"
          :key="index"
          :offset="1"
        >
          <el-card
            :body-style="{ padding: '2px' }"
            style="
              padding: 5px;
              margin-bottom: 20px;
              border: 5px solid #d4e7f3;
              color: #9b6559;
              background-color: #f5f7fa;
            "
          >
            <div style="height: 40px">
              <span>{{ test.service_name }}</span>
              <el-dropdown style="float: right; padding: 3px 0">
                <span class="el-dropdown-link">
                  <i class="el-icon-setting"></i
                ></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>服务详情</el-dropdown-item>
                  <el-dropdown-item
                    ><el-button
                      type="text"
                      @click="
                        (dialogserverUPDATE = true), select_service_id(test.id)
                      "
                      >服务修改</el-button
                    >
                  </el-dropdown-item>
                  <!-- <el-dropdown-item>删除</el-dropdown-item> -->
                  <el-dropdown-item>
                    <el-button type="text" @click="openVersion(test.id)"
                      >增加版本</el-button
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- 修改服务 -->
              <el-dialog
                title="修改服务信息"
                :visible.sync="dialogserverUPDATE"
                width=""
              >
                <el-form :model="formData">
                  <el-form-item label="服务名称:">
                    <el-input
                      v-model="formData.service_name"
                      style="width: 30%"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="服务描述:">
                    <el-input
                      type="textarea"
                      :rows="3"
                      placeholder="请输入内容"
                      style="width: 30%"
                      v-model="formData.service_desc"
                    >
                    </el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogserverUPDATE = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="update_service(test.id)"
                    >更 新</el-button
                  >
                </div>
              </el-dialog>
              <!-- 创建版本 -->
              <el-dialog title="创建版本" :visible.sync="dialogversion">
                <el-form :model="formData">
                  <el-form-item label="版本名称:">
                    <el-input v-model="formData.version_name"></el-input>
                  </el-form-item>
                  <el-form-item label="版本负责人:">
                    <el-input v-model="formData.version_manage"></el-input>
                  </el-form-item>
                  <el-form-item label="版本描述:">
                    <el-input
                      type="textarea"
                      :rows="3"
                      placeholder="请输入内容"
                      v-model="formData.version_desc"
                    >
                    </el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogversion = false">取 消</el-button>
                  <el-button
                    type="primary"
                    @click="(dialogversion = false), addVersion(test.id)"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </div>
            <div>
              <el-button
                @click="(drawer = true), select_version(test.id)"
                type="text"
                style="margin-left: 16px"
              >
                点击查看版本信息
              </el-button>

              <el-drawer
                title="版本详情"
                :visible.sync="drawer"
                :with-header="false"
              >
                <span>版本详情</span><br />

                <el-table :data="versionall" height="500">
                  <el-table-column
                    property="version_name"
                    label="版本号"
                    width="100"
                  ></el-table-column>
                  <el-table-column
                    property="version_manage"
                    label="负责人"
                    width="100"
                  ></el-table-column>
                  <el-table-column
                    property="version_desc"
                    label="说明"
                    width="250"
                  ></el-table-column>
                  <el-table-column label="操作" width="50">
                    <template slot-scope="scope">
                      <el-button
                        @click="select_version_id(scope.row.id)"
                        type="text"
                      >
                        <i class="el-icon-edit-outline"></i>
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-drawer>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 修改版本 -->
      <el-dialog title="修改版本" :visible.sync="versionUPDATE">
        <el-form :model="versionData">
          <el-form-item label="版本号:">
            <el-input v-model="versionData.version_name"></el-input>
          </el-form-item>
          <el-form-item label="版本负责人:">
            <el-input v-model="versionData.version_manage"></el-input>
          </el-form-item>
          <el-form-item label="版本描述:">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="versionData.version_desc"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="versionUPDATE = false">取 消</el-button>
          <el-button type="primary" @click="updata_version()">更 新</el-button>
        </div>
      </el-dialog>
      <!-- 创建服务 -->
      <el-dialog title="创建服务" :visible.sync="dialogserver">
        <el-form :model="formData">
          <el-form-item label="服务名称:">
            <el-input v-model="formData.service_name"></el-input>
          </el-form-item>
          <el-form-item label="服务描述:">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="formData.service_desc"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogserver = false">取 消</el-button>
          <el-button
            type="primary"
            @click="(dialogserver = false), addService()"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      version_all: "",
      drawer: false,
      dialogserverUPDATE: false,
      dialogserver: false,
      dialogversion: false,
      versionUPDATE: false,
      versionData: {
        version_name: "",
        version_manage: "",
        version_desc: "",
      },

      formData: {
        service_id: "",
        service_name: "",
        service_desc: "",
        version_name: "",
        version_manage: "",
        version_desc: "",
        updateService: undefined,
      },
      list: [],
      listService: [],
      listServiceVersion: [],
      versionall: [],

      rules: {},
    };
  },

  mounted() {
    this.ServiceVersion(this.$route.query.id);
  },

  methods: {
    openVersion(service_id) {
      this.formData = {};
      this.dialogversion = true;
      this.formData.service_id = service_id;
    },
    openServiceInput() {
      this.formData = {};
      this.dialogserver = true;
    },
    open(service) {
      this.$prompt("请输入版本号", "新增", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "输入版本不能为空",
      })
        .then(({ value }) => {
          this.addVersion(service, value);
          this.$message({
            type: "success",
            message: "你的新增版本是: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    // 增加服务
    addService() {
      this.$axios
        .put("/addService/", {
          service_name: this.formData.service_name,
          service_desc: this.formData.service_desc,
          project_id: this.$route.query.id,
        })
        .then((res) => {
          if (res.data["success"] === "true") {
            this.ServiceVersion(this.$route.query.id);
          }
        });
    },

    // 查询服务信息
    ServiceVersion(project_id) {
      (this.list = []),
        (this.listService = []),
        (this.listServiceVersion = []),
        this.$axios
          .get("/serviceVersion/", { params: { project_id: project_id } })
          .then((res) => {
            this.listService = res.data;
          });
    },

    // 增加版本
    addVersion() {
      this.$axios
        .put("/addVersion/", {
          version_name: this.formData.version_name,
          service_id: this.formData.service_id,
          version_manage: this.formData.version_manage,
          version_desc: this.formData.version_desc,
          project_id: this.$route.query.id,
        })
        .then((res) => {
          if (res.data["success"] === "true") {
            this.ServiceVersion(this.$route.query.id);
          }
        });
    },
    // 修改服务
    update_service(service_id) {
      console.log(service_id);
      this.$axios
        .put("/updateService/", {
          service_name: this.formData.service_name,
          service_desc: this.formData.service_desc,
          service_id: this.formData.id,
        })
        .then((res) => {
          if (res.data["success"] === "true") {
            this.ServiceVersion(this.$route.query.id);
            this.dialogserverUPDATE = false;
          }
        });
    },

    // 查询版本
    select_version_id(version_id) {
      this.versionUPDATE = true;
      this.$axios
        .get("/select_version_id/", { params: { version_id: version_id } })
        .then((res) => {
          this.versionData = res.data[0];
        });
    },

    // 修改版本
    updata_version() {
      this.$axios
        .put("/updateVersion/", {
          version_name: this.versionData.version_name,
          version_manage: this.versionData.version_manage,
          version_desc: this.versionData.version_desc,
          version_id: this.versionData.id,
        })
        .then((res) => {
          if (res.data["success"] === "true") {
            this.versionUPDATE = false;
            this.select_version(this.versionData.service_id);
          }
        });
    },

    //查询服务
    select_service_id(service_id) {
      this.$axios
        .get("/select_service_id/", { params: { service_id: service_id } })
        .then((res) => {
          this.formData = res.data[0];
        });
    },

    // 查询版本信息
    select_version(service_id) {
      this.$axios
        .get("/select_version/", { params: { service_id: service_id } })
        .then((res) => {
          this.versionall = res.data;
        });
    },
  },
};
</script>
<style>
.el-collapse-item__header {
  color: #a0d052;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.el-drawer.rtl {
  width: 37% !important;
  height: 80%;
  top: 10%;
  border-radius: 6px;
  padding: 2%;
}
</style>